<template>
  <div id="sendRecord">
    <el-card class="box-card" style="margin:15px">
      <el-form
        ref="basicForm"
        :rules="basicDataRules"
        :inline="true"
        :model="basicData.model"
        class="demo-form-inline"
        label-width="120px"
        size="mini"
      >
        <el-col :span="6">
          <el-form-item label="母亲姓名:" prop="momName" label-width="73px">
            <el-input size="mini" v-model="basicData.model.momName" placeholder="输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="手机号码:" prop="phone">
            <el-input size="mini" v-model="basicData.model.phone" placeholder="输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="结论:" prop="experimentResult.key">
            <el-select
              size="mini"
              v-model="basicData.model.experimentResult.key"
              placeholder="实验结论"
            >
              <el-option
                v-for="(item, key, index) in dicts.EXPERIMENT_RESULT"
                :key="index"
                :label="item"
                :value="key"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-form>
      <div class="buttom">
        <el-button
          type="primary"
          size="mini"
          style="width:100px"
          icon="el-icon-search"
          @click="onSubmit('query')"
        >查询</el-button>
        <el-button size="mini" @click="onSubmit('reset')">清空</el-button>
      </div>
    </el-card>
    <el-card class="box-card" style="margin:5px 15px;">
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%;padding:5px;"
        :header-cell-style="{
          background: '#333333',
          color: '#ffffff',
          textAlign: 'center'
        }"
      >
        <el-table-column align="center" type="index" width="55" />
        <el-table-column align="center" prop="momName" label="母亲姓名" />
        <el-table-column align="center" prop="phone" label="手机号码" />
        <el-table-column align="center" prop="sendStatus.data" label="短信发送状态" />
        <el-table-column align="center" prop="sendType.data" label="发送方式" />
        <el-table-column align="center" prop="createUser" label="发放人员" />
        <el-table-column align="center" prop="sendTime" label="发送日期">
          <template slot-scope="scope">
            <span>
              {{
              scope.row.sendTime ? scope.row.sendTime.substr(0, 10) : ""
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="experimentResult.data" label="结论" />
      </el-table>
      <el-pagination
        :current-page="basicData.current"
        :page-size="basicData.size"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
        <!-- <span style="font-weight: 400;color:#606266">已选中{{ selectTables.length }}条，</span> -->
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { initDicts } from "@/utils/commons";
import orgApi from "@/api/Org.js";
import InformManageApi from "@/api/InformManage.js";

export default {
  data() {
    return {
      // 转菊花
      loading: false,
      // 表格数据
      tableData: [],
      // 基本数据
      basicData: {
        current: 1,
        map: {},
        model: {
          birthTime: "",
          bloodNum: "",
          createTime: "",
          createUser: "",
          experimentKeywords: {
            data: "",
            key: ""
          },
          experimentNum: "",
          experimentResult: {
            data: "",
            key: ""
          },
          id: "",
          momName: "",
          phone: "",
          sampleExperimentId: "",
          sampleId: "",
          sendQuantity: "",
          sendStatus: {
            data: "",
            key: ""
          },
          sendStatusId: "",
          sendTime: "",
          sendType: {
            data: "",
            key: ""
          },
          smsTaskId: "",
          updateTime: "",
          updateUser: ""
        },
        order: "descending",
        size: 10,
        sort: "id"
      },
      total: 0,
      // 校验
      basicDataRules: {
        countyAndCitiesId: [
          { required: false, message: "请选择所属区县", trigger: "change" }
        ],
        hospitalId: [
          { required: false, message: "请选择所属医院", trigger: "change" }
        ],
        deptId: [
          { required: false, message: "请选择所属部门", trigger: "change" }
        ],
        motherName: [
          { required: false, message: "请输入母亲姓名", trigger: "change" }
        ],
        tel: [
          { required: false, message: "请输入手机号码", trigger: "change" }
        ],
        weight: [{ required: false, message: "请输入体重", trigger: "change" }],
        week: [{ required: false, message: "请输入孕周", trigger: "change" }],
        day: [{ required: false, message: "请输入孕天", trigger: "change" }],
        sex: [{ required: false, message: "请选择性别", trigger: "change" }],
        samplingNumber: [
          { required: false, message: "请输入采血编号", trigger: "change" }
        ],
        motherIdCard: [
          { required: false, message: "请输入条形码号", trigger: "change" }
        ]
      },
      // 字典
      dicts: {
        EXPERIMENT_RESULT: {} //实验结论
      }
    };
  },
  mounted() {
    initDicts(["EXPERIMENT_RESULT"], this.dicts);
    // // 获取基础查询
    // this.initOrgTree();
    // 获取表格数据
    this.getList(this.basicData);
  },
  methods: {
    // 获取table
    getList(data) {
      this.loading = true;
      InformManageApi.sendRecord.page(data).then(res => {
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;
        this.loading = false;
      });
    },
    // 点击展示与收起
    onMoreStatus() {
      this.morderShow = !this.morderShow;
    },
    //点击全选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 基础信息按钮点击事件
    onSubmit(type) {
      if (type == "query") {
        this.getList(this.basicData);
      } else if (type == "reset") {
        this.$refs["basicForm"].resetFields();
        this.basicData.model = {
          birthTime: "",
          bloodNum: "",
          createTime: "",
          createUser: "",
          experimentKeywords: {
            data: "",
            key: ""
          },
          experimentNum: "",
          experimentResult: {
            data: "",
            key: ""
          },
          id: "",
          momName: "",
          phone: "",
          sampleExperimentId: "",
          sampleId: "",
          sendQuantity: "",
          sendStatus: {
            data: "",
            key: ""
          },
          sendStatusId: "",
          sendTime: "",
          sendType: {
            data: "",
            key: ""
          },
          smsTaskId: "",
          updateTime: "",
          updateUser: ""
        };
        this.getList(this.basicData);
      }
    },
    // 点击打印
    clickTruePrint() {
      this.handlePrintPrint();
    },
    // 打印事件
    handlePrintPrint() {
      if (this.upLoading) {
        this.$message({
          message: "数据加载中,请稍后...",
          type: "warning"
        });
      } else {
        this.CreateTablePage("print", "采血卡打印", "sampleManage");
      }
    },
    // 点击分页
    handleSizeChange: function(val) {
      this.pageSize = val;
    },
    // 选择页码
    handleCurrentChange: function(currentPage) {
      this.pageIndex = currentPage;
    },
    // 点击分页
    handleSizeChange: function(val) {
      this.basicData.size = val;
      this.getList(this.basicData);
    },
    // 选择页码
    handleCurrentChange: function(currentPage) {
      this.basicData.current = currentPage;
      this.getList(this.basicData);
    }
  }
};
</script>

<style lang="less">
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
#sendRecord {
  .experimentList {
    width: 40%;

    .el-form-item__content {
      width: 80%;
    }
  }
  .mores {
    .flex;
    justify-content: flex-start;
    .more-title {
      font-size: 12px;
      font-family: SourceHanSansSC;
      font-weight: 400;
      color: rgb(153, 153, 153);
      font-style: normal;
      letter-spacing: 0px;
      line-height: 20px;
      text-decoration: none;
      margin-right: 1rem;
    }
  }

  #more-row {
    #shiyan {
      .projectIdList {
        width: 100%;
        .el-form-item__content {
          width: 80%;
        }
      }
    }
    .more-col {
      .remark {
        width: 100%;
        .el-form-item__content {
          width: 90%;
        }
      }
    }
    .el-form-item {
      .el-form-item__content {
        width: 400px;
      }
    }
  }
  .buttom {
    width: 100%;
    .flex;
  }
  .el-dialog__header {
    border-bottom: 1px solid #e0e0e0;
  }
  .print-form {
    max-height: 500px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    flex-flow: wrap;
    .print-item {
      width: 50%;
      .flex;
      justify-content: flex-start;
      color: #222222;
      font-size: 15px;
      margin-top: 10px;
      .title {
        font-weight: bold;
        flex: 0.4;
      }
      .value {
        flex: 0.6;
        font-weight: bold;
        overflow-wrap: anywhere;
      }
    }
  }
  .el-dialog__footer {
    .flex;
  }
  .select-input {
    .el-form-item {
      margin: 0;
      .el-select .el-input {
        width: 100%;
      }
    }
    .flex;
    justify-content: flex-start;
    margin-bottom: 18px;
    .el-select .el-input {
      width: 110px;
    }
    .input-with-select .el-input-group__prepend {
      background-color: #fff;
    }
  }
}
</style>
